<template>
  <div>
    <div class="app-container">
      <div class="header">{{$route.meta.title}}-码头</div>
    </div>

    <div class="app-container margin-content padding-content">
      <div class="clearfix">
        <div class="fl">
          <el-form
            :model="dataForm"
            ref="dataForm"
            inline>
            <el-form-item prop="month">
              <el-date-picker
                type="month"
                value-format="yyyy-MM"
                v-model="dataForm.month"
                @change="handleMonthChange"
                :editable="false"
                :clearable="false"
                :picker-options="pickerOptions"
                placeholder="选择月份"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!--码头:-->
      <!--身份：0-->
      <!--经促局核实通过：3-->
      <!--经促局核实不通过：7-->
      <!--不可操作状态：-->
      <!--可操作状态:2,8-->

      <!--码头:-->
      <!--不可操作状态：-->
      <!--可操作状态:-->
      <cost-table
        :data="tableData"
        :loading="loading"
        :status="[]"
        @view="view"></cost-table>
    </div>

    <!-- 明细记录 -->
    <cost-view v-if="viewVisible" ref="costView" @refresh="_getStatisticsList()"></cost-view>
  </div>
</template>

<script>
  // api
  import { getStatisticsList } from '@/api/statistics'
  // utils
  import { getPreMonth } from '@/utils'
  // vuex
  import { mapMutations } from 'vuex'
  // components
  import Audit from '@/components/CostAudit'
  import CostView from '@/components/CostView'
  import Divider from '@/components/Divider'
  import AuditRecord from '@/components/CostAuditRecord'
  import CostTable from '@/components/CostTable'

  export default {
    name: 'costCount',
    data() {
      return {
        tableKey: 0,
        tableData: [],
        loading: false,
        scrollHeight: null,
        dataForm: {
          auditStatus: 0,
          identity: 0,
          month: getPreMonth()
        },
        viewVisible: false,
        pickerOptions: {
          disabledDate(time) {
            const d = new Date()
            const pre = d.setMonth(d.getMonth() - 1)
            return time.getTime() > pre
          }
        }
      }
    },
    created() {
      this._getStatisticsList()
      this.tableResize()
    },
    methods: {
      tableResize() {
        const _height = 280
        this.scrollHeight = document.body.scrollHeight - _height
        window.onresize = () => {
          this.scrollHeight = document.body.scrollHeight - _height
        }
      },
      _getStatisticsList() {
        this.loading = true
        getStatisticsList(this.dataForm).then((res) => {
          this.tableData = res.data.data.dataList
          this.loading = false
        }).catch((err) => {
          this.tableData = []
          this.loading = false
        })
      },
      view(e) {
        this.viewVisible = true
        this.$nextTick(() => {
          this.setCurrentId({ statisticsId: e.id, portId: e.portId, month: e.statisticsMonth, isEdit: false })
          this.$refs['costView'].init()
        })
      },
      handleMonthChange() {
        this._getStatisticsList()
      },
      ...mapMutations({
        setCurrentId: 'SET_CURRENTID'
      })
    },
    components: {
      Audit,
      CostView,
      Divider,
      AuditRecord,
      CostTable
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">

</style>
